<div class="app-helper">
  <clr-dropdown>
    <div cds-layout="horizontal gap:sm">
      <button class="dropdown-button" clrDropdownTrigger>
        <cds-icon shape="help"></cds-icon>
      </button>
    </div>
    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
      <div
        aria-label="Dropdown header About Octant"
        clrDropdownItem
        (click)="toggleBuildInfo()"
      >
        About Octant
      </div>
      <div
        aria-label="Dropdown header Show Releases"
        clrDropdownItem
        (click)="toggleReleases()"
      >
        Release Information
      </div>
      <div
        class="with-shortcut"
        aria-label="Dropdown header Keyboard Shortcuts"
        clrDropdownItem
        (click)="toggleShortcut()"
      >
        Keyboard Shortcuts
        <span class="label right-aligned">
          Ctrl
          <span class="badge">/</span>
        </span>
      </div>
      <div
        aria-label="Dropdown header Open Issue"
        clrDropdownItem
        (click)="openIssue()"
      >
        Open an issue/Provide feedback
      </div>
      <div
        aria-label="Dropdown header Show Documentation"
        clrDropdownItem
        (click)="showDocs()"
      >
        Octant Documentation
      </div>
    </clr-dropdown-menu>
  </clr-dropdown>
</div>

<cds-modal size="md" id="build-modal" [closable]="true" hidden (closeChange)="toggleBuildInfo()">
  <cds-modal-header>
    <h3 cds-text="title" cds-first-focus tabindex="-1">Build Information</h3>
  </cds-modal-header>
  <cds-modal-content>
    <table class="table table-vertical table-noborder">
      <tbody>
      <tr>
        <th>Version</th>
        <td>{{ version }}</td>
      </tr>
      <tr>
        <th>Commit</th>
        <td>{{ commit }}</td>
      </tr>
      <tr>
        <th>Built</th>
        <td>{{ time }}</td>
      </tr>
      </tbody>
    </table>
  </cds-modal-content>
  <cds-modal-actions>
    <cds-button (click)="toggleBuildInfo()">Close</cds-button>
  </cds-modal-actions>
</cds-modal>

<cds-modal size="lg" id="release-modal" [closable]="true" hidden (closeChange)="toggleReleases()">
  <cds-modal-header>
    <h3 cds-text="title" cds-first-focus tabindex="-1">Octant Release Information</h3>
  </cds-modal-header>
  <cds-modal-content>
    <ng-container *ngIf="releaseInfo.config.value; else loading">
      <p class="release-info">
        <app-view-text [view]="releaseInfo"></app-view-text>
      </p>
    </ng-container>
    <ng-template #loading>
      <div class="loading-spinner">
        <span class="spinner">
          Loading...
        </span>
      </div>
    </ng-template>
  </cds-modal-content>
  <cds-modal-actions>
    <cds-button (click)="toggleReleases()">Close</cds-button>
  </cds-modal-actions>
</cds-modal>

<cds-modal size="md" id="shortcut-modal" [closable]="true" hidden (closeChange)="toggleShortcut()">
  <cds-modal-header>
    <h3 cds-text="title" cds-first-focus tabindex="-1">Keyboard Shortcuts</h3>
  </cds-modal-header>
  <cds-modal-content>
    <clr-stack-view>
      <clr-stack-block
        [clrSbExpandable]="false"
        [clrSbExpanded]="true"
        [clrStackViewLevel]="1"
        [clrStackViewSetsize]="2"
        [clrStackViewPosinset]="1"
      >
        <clr-stack-label>Global</clr-stack-label>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Keyboard shortcut list</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl<span class="badge">/</span></span>
          </clr-stack-content>
        </clr-stack-block>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Quick switcher menu</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl<span class="badge">Enter</span></span>
          </clr-stack-content>
        </clr-stack-block>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Apply YAML</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl<span class="badge">Y</span></span>
          </clr-stack-content>
        </clr-stack-block>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Toggle Theme</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl Shift<span class="badge">T</span></span>
          </clr-stack-content>
        </clr-stack-block>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Toggle Navigation</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl<span class="badge">b</span></span>
          </clr-stack-content>
        </clr-stack-block>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Show/Hide Labels</clr-stack-label>
          <clr-stack-content>
            <span class="label">Ctrl Shift<span class="badge">L</span></span>
          </clr-stack-content>
        </clr-stack-block>
      </clr-stack-block>
      <clr-stack-block
        [clrSbExpandable]="false"
        [clrSbExpanded]="true"
        [clrStackViewLevel]="1"
        [clrStackViewSetsize]="2"
        [clrStackViewPosinset]="1"
      >
        <clr-stack-label>YAML</clr-stack-label>
        <clr-stack-block
          [clrStackViewLevel]="2"
          [clrStackViewSetsize]="0"
          [clrStackViewPosinset]="1"
        >
          <clr-stack-label>Command palette</clr-stack-label>
          <clr-stack-content>
            <span class="label">F1</span>
          </clr-stack-content>
        </clr-stack-block>
      </clr-stack-block>
    </clr-stack-view>
  </cds-modal-content>
  <cds-modal-actions>
    <cds-button action="outline" (click)="toggleShortcut()">Close</cds-button>
  </cds-modal-actions>
</cds-modal>
